import React, { ComponentType } from 'react'
import NProgress from 'nprogress'
// 代码分割 React.lazy 和 Suspense 技术还不支持服务端渲染。所以使用loadable
import loadable from '@loadable/component'
import { Skeleton } from 'antd'

const Fallback = ()=>{
  NProgress.start()
  return  <Skeleton active avatar loading paragraph />
}

const AsyncComponent = (loader: () => Promise<ComponentType<any> | { default: ComponentType<any>; }>) => loadable(
  () => loader().finally(() => NProgress.done()),
  {
    fallback: <Fallback />
  },
)

export default AsyncComponent
